<template>
	<div  class="containers">
	<div  class="container">
    <div class="handle-box">
      <el-input v-model="keyword" placeholder="电话" class="handle-input mr10" size="mini"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearch" class="mr10" size="mini">搜索</el-button>
      <el-button type="primary"  @click="resetSearch" class="mr10" size="mini">重置</el-button>
      </div>
		<el-table :data="tableData" ref="table" style="width: 100%" row-key="ID" lazy :load="load" border size='mini' :height="$tableHight"
			:tree-props="{ children: 'children', hasChildren: 'is_c' }" v-loading="loading">
			<el-table-column prop="ID" label="ID" width="160"> </el-table-column>
			<el-table-column prop="user_id" label="user_id" width="160"> </el-table-column>
			<el-table-column prop="nickname" label="昵称"> </el-table-column>
			<el-table-column prop="mobile" label="电话"> </el-table-column>
			<el-table-column prop="money" label="个人业绩"> </el-table-column>
			<!-- <el-table-column prop="coupon" label="茶豆"> </el-table-column>
			<el-table-column prop="prove" label="贡献值凭证"> </el-table-column> -->

			<el-table-column prop="total_team_money" label="团队业绩"> </el-table-column>
			<!-- <el-table-column  label="区">
				<template slot-scope="scope">
					<el-tag >
						{{ scope.row.big == 0 ? '小区' : '大区' }}
					</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column  label="登录状态">
				<template slot-scope="scope">
					<el-tag :type="scope.row.frozen === false ? 'success' : scope.row.frozen === true ? 'danger' : ''" size="mini">
						{{ scope.row.frozen === false ? '正常' : '冻结' }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<!-- 添加分页组件 -->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[15, 20, 30, 50]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
			background
			class="pagination">
		</el-pagination>
	</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			tableData: [],
			keyword: '',
      		loading:false,
			levellist:[],
			// 添加分页相关数据
			currentPage: 1,
			pageSize: 15,
			total: 0,
			hasMore: true // 标记是否还有更多数据
		}
	},
	created() {

		this.loads()
	},
	methods: {

		getData(){
			let id = 0
			this.loading=true
			// 修改getData方法，使用分页参数
			this.request('admin/adminteam/', 'get', { id: id, page: this.currentPage, size: this.pageSize }).then(res => {
				this.tableData = res.data
				// 由于后台没有返回总条数，我们需要根据返回数据判断是否还有更多数据
				if (res.data.length < this.pageSize) {
					// 如果返回的数据少于页面大小，说明是最后一页
					this.hasMore = false
					this.total = (this.currentPage - 1) * this.pageSize + res.data.length
				} else {
					// 如果返回的数据等于页面大小，说明可能还有更多数据
					this.hasMore = true
					// 设置一个较大的总数，确保可以点击下一页
					// 当用户点击下一页时，再根据实际情况调整
					this.total = this.currentPage * this.pageSize + 1
				}
				this.loading=false
			})
		},
		loads() {//获取级别
      this.request('admin/setLevel/', 'get', {}).then(
        res => {
          if (res.errno == 0) {
            for(let i in res.data.level){
              this.levellist[i]=res.data.level[i]
            }

          }
          this.getData()
        },
        function () {
          console.log('请求失败处理');
        }
      );
    },
    resetSearch() {
      this.keyword = '';
      this.getData()
    },
		handleSearch() {
			if(this.keyword.length!=11){
				this.$message.error("请输入手机号");
        return
			}
			this.request('admin/userInfo/?page=1&size=20' , 'get',{keyword:this.keyword}).then(
				res => {
					if (res.data.total >= 1) {
						this.$message.success('搜索成功');
						this.request('admin/adminteam/?id=' + res.data.data[0].ID, 'get',).then(
							ress => {
								if (ress.errno == 0) {

									console.log(ress)
									this.tableData = ress.data
									this.$nextTick(() => { //在数据加载完，重新渲染表格
										this.$refs['table'].doLayout();
									})
								}
							},
							function () {
								console.log('请求失败处理');
							}
						);
					} else {
						this.$message.error("没有搜索到");
					}
				},
				function () {
					console.log('请求失败处理');
				}
			);
      	this.loading=false
		},
		shanji(index, row) {
			console.log(row)
			this.request('adminteam/?id=' + row.parent_id, 'get',).then(
				res => {
					if (res.errno == 0) {
						console.log(res)
						this.tableData = [res.data.user]
						this.$nextTick(() => { //在数据加载完，重新渲染表格
							this.$refs['table'].doLayout();
						})
					}
				},
				function () {
					console.log('请求失败处理');
				}
			);
		},
		load(tree, treeNode, resolve) {
      this.request('admin/adminteam/', 'get', { id: tree.ID }).then(res => {
      resolve(res.data)
    })
		},
		// 添加分页相关方法
		handleSizeChange(val) {
			this.pageSize = val;
			this.currentPage = 1; // 每次更改页面大小时回到第一页
			this.getData();
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.getData();
		}
	},
}
</script>
<style scoped>
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
.contair{
  padding: 20px;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.mr10 {
  margin-right: 10px;
}

/* 添加分页样式 */
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
